<section ng-show="open" ng-keyup="keyUp($event)" tabindex="1" class="modal modal-animation ng-hide" id="group-modal" ng-controller="GroupCtrl">

  <header ng-switch="action">
    <a class="fa fa-times close-modal" ng-click="close()"></a>
    <h2 ng-switch-when="add" translate="USERS.GROUPS.DETAILS.NEWCAPTION"><!-- Create group --></h2>
    <h2 ng-switch-when="edit" translate="USERS.GROUPS.DETAILS.EDITCAPTION" translate-values="{{group}}"><!-- Group details - {{name}} --></h2>
  </header>

  <nav class="modal-nav" id="modal-nav">
    <a ng-click="openTab('group')" data-modal-tab="group" ng-class="{ active: tab == 'group' }" translate="USERS.GROUPS.DETAILS.TABS.GROUP">
      <!-- Group -->
    </a>
    <a ng-click="openTab('roles')" data-modal-tab="roles" ng-class="{ active: tab == 'roles' }" translate="USERS.GROUPS.DETAILS.TABS.ROLES">
      <!-- Roles -->
    </a>
    <a ng-click="openTab('users')" data-modal-tab="users" ng-class="{ active: tab == 'users' }" translate="USERS.GROUPS.DETAILS.TABS.USERS">
      <!-- Users -->
    </a>
  </nav>

  <a ng-click="showAdjacent(true)" ng-if="hasAdjacent(true)"><i class="arrow fa fa-chevron-left"></i></a>
  <a ng-click="showAdjacent()" ng-if="hasAdjacent()"><i class="arrow fa fa-chevron-right"></i></a>

  <form name="groupForm">
    <div class="modal-content" data-modal-tab-content="group">
      <div class="modal-body">
        <div class="form-container">
          <div data-admin-ng-notifications="" context="group-form"></div>
          <div class="row">
            <label class="required" translate="USERS.GROUPS.DETAILS.FORM.NAME"><!-- Group Name --></label>
            <input ng-init="blurred.name = false" ng-model="group.name" type="text" ng-required="true"
                   placeholder="{{ 'USERS.GROUPS.DETAILS.FORM.NAME' | translate }}..."
                   name="name"
                   ng-class="blurred.name == true && !groupForm.name.$valid ? 'error' : ''"
                   ng-blur="blurred.name=true"
                   sanitize-xml="group.name">
          </div>
          <div class="row">
            <label translate="USERS.GROUPS.DETAILS.FORM.DESCRIPTION"><!-- Description --></label>
            <textarea ng-model="group.description"
                      placeholder="Description..."
                      rows="4"
                      name="description"
                      sanitize-xml="group.description">
            </textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="modal-content" data-modal-tab-content="roles">
      <div class="modal-body">
        <div class="form-container">
          <div data-admin-ng-notifications="" context="group-form"></div>
          <admin-ng-select-box resource="role" data-height="21em" data-ignore="ROLE_GROUP_"></admin-ng-select-box>
        </div>
      </div>
    </div>

    <div class="modal-content" data-modal-tab-content="users">
      <div class="modal-body">
        <div class="form-container">
          <div data-admin-ng-notifications="" context="group-form"></div>
          <admin-ng-select-box resource="user" data-height="21em" group-by="provider" display="value"></admin-ng-select-box>
        </div>
      </div>
    </div>
  </form>

  <footer>
    <a ng-click="submit()" class="submit {{ getSubmitButtonState() }}" translate="SUBMIT">
      <!-- Submit -->
    </a>
    <a ng-click="close()" class="cancel" translate="CANCEL">
      <!-- Cancel -->
    </a>
  </footer>
</section>
